/*
  学习目标：使用NavLink实现高亮效果
*/
import React from 'react';

// 1. 导入NavLink组件
import { HashRouter, Route, Link, BrowserRouter as Router, NavLink } from 'react-router-dom';

// 2. 新建样式文件，并导入
import './index.css';
export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <NavLink to="/home" activeClassName="my-active">
                首页
              </NavLink>
            </li>
            <li>
              {/* 3.默认高亮类名是active，activeClassName属性用来自定义类名，exact表示精准匹配 */}
              <NavLink to="/my" activeClassName="my-active" exact>
                我的音乐
              </NavLink>
            </li>
            <li>
              <NavLink to="/friend" activeClassName="my-active">
                我的朋友
              </NavLink>
            </li>
          </ul>
          <Route path="/home" component={Home}></Route>
          <Route path="/my" component={MyMusic}></Route>
          <Route path="/friend" component={Friend}></Route>
        </div>
      </Router>
    );
  }
}

function Home(params) {
  return <h1>我是首页组件</h1>;
}

function MyMusic(params) {
  return <h1>我是我的音乐件</h1>;
}

function Friend(params) {
  return <h1>我是朋友组件</h1>;
}
